<template>
    <view class="fui-wrap ">
        <scroll-view :scroll-with-animation="true" :enable-back-to-top="true" @scroll="onScroll" @scrolltolower="onReachBottom" scroll-y="true" style="height:100vh;">
            <view class="fui-page__bd-user" ref="userInfoSection">
                <view class="fui-page__bd fui-page__spacing">
                    <view class="fui-function user-info">
                        <view class="fui-icon__item fui-align__center ">
                            <fui-avatar size="large" class="user-head" :src="cdnHost+user.head" radius="120"></fui-avatar>
                        </view>
                        <view class="fui-icon__item">
                            <view class="fui-icon__name">{{user.postCount}}</view>
                            <view class="fui-icon__name">帖子</view>
                        </view>
                        <view class="fui-icon__item">
                            <view class="fui-icon__name">{{user.fansCount}}</view>
                            <view class="fui-icon__name">粉丝</view>
                        </view>
                        <view class="fui-icon__item">
                            <view class="fui-icon__name">{{user.followCount}}</view>
                            <view class="fui-icon__name" >关注</view>
                        </view>
                </view>
                </view>
                <view class="fui-page__bd user-name fui-page__spacing">
                        <view class="fui-icon__item fui-align__center ">
                            {{user.nick}}
                        </view>
                </view>

                <view class="fui-page__bd fui-page__spacing">
                    <view class="fui-function user-action" >
                        <view class="fui-icon__item "  >
                            <fui-button background="#f2f4f5" @click="onfollow" color="black" size="28" height="65rpx">{{user.followed?'已关注':'+关注'}}</fui-button>
                        </view>
                        <!-- <view class="fui-icon__item">
                            <fui-button background="#f2f4f5"    color="black" size="28" height="65rpx">私信</fui-button>
                        </view> -->
                        <view class="fui-icon__item">
                              <fui-button background="#f2f4f5" color="black" size="28" height="65rpx" @click="onShowRecommend"><fui-icon :name="showRecommend?'addfriends-fill':'addfriends'" size="40"></fui-icon></fui-button>
                        </view>
                </view>
                </view>
                <view class="fui-page__bd fui-page__spacing" v-if="showRecommend" >
                    <label style="font-size: 20rpx;">你可能感兴趣</label>
                    <fui-horizontal-scroll background="rgba(255, 43, 43, .08)" scrollBarColor="#FF2B2B" :scroll="false">
                        <view class="fui-list fui-recommend">
                            <view class="fui-list--item" v-for="(item,index) in recommendList" :key="index" >
                                <view class="recommed-close" @click="deleteRecommendUser" :data-index="index"><fui-icon name="close" size="30"></fui-icon></view>
                                <fui-lazyload size="large" radius="196" marginBottom="20" :width="175" :height="175" :src="cdnHost + item.head" mode="aspectFill" :data-id="item.uid" @tap.stop="toUser">
                                </fui-lazyload>
                                <fui-text :text="truncate(item.nick)" color="#00000" size="24"></fui-text>
                                <fui-text :text="`${item.name}`" color="#00000" size="24"></fui-text>
                                <button type='primary' class="follow-btn"  @click="onFollowRecommend" :data-id="item.uid"  color="white" size="28" height="55rpx">关注</button>
                            </view>
                        </view>
                    </fui-horizontal-scroll>
                </view>
            </view>
            <view :class="['tab-container-wrapper', isTabSticky ? 'is-sticky' : '']">
                <scroll-view scroll-x class="bg-white nav " :scroll-with-animation="true" :enable-back-to-top="true" >
                <view class="flex text-center tab-container">
                    <view class="cu-item flex-sub" :class="0==selectStatus?'tab-select':''" @click="onTabSelect" data-id="0" data-index="0">
                        作品
                    </view>
                    <view class="cu-item flex-sub" :class="1==selectStatus?'tab-select':''" @click="onTabSelect" data-id="1" data-index="1">
                        收藏
                    </view>
                    <view class="cu-item flex-sub" :class="2==selectStatus?'tab-select':''" @click="onTabSelect" data-id="2" data-index="2">
                        喜欢
                    </view>
                </view>
                </scroll-view>
                <view class="tab-cursor" :style="translateX"></view>
            </view>
            <!-- 吸顶时的占位元素，高度与Tab容器保持一致 -->
            <view v-if="isTabSticky" :style="`height: ${tabContainerHeight}px;`"></view>
            <view>
                <fui-grid v-if="postList.length > 0">
                    <fui-grid-item v-for="(item,index) in postList" :key="index">
                        <view class="fui-grid__cell" @tap="toPost" :data-id="item.id" >
                            <image  :id="generateId(item.id, index)" mode="aspectFill" lazy-load :src="item.urls[0]?.startsWith('http') ? item.urls[0] : cdnHost + item.urls[0]" class="fui-icon"></image>
                        </view>
                    </fui-grid-item>
                </fui-grid>
                <!-- 空状态 -->
                <view v-else class="empty-content">
                    <view class="empty-text"></view>
                </view>
            </view>
        </scroll-view>
    </view>   
</template>
 <script lang="ts" src="./blogger.ts"/>
<style scoped>
.fui-page__spacing{
    /* padding-right: 32rpx; */
    /* placeholder for future styles */
}
.fui-function{
	width: 100%;
	display: flex;
	height:32rpx;
	line-height: 32rpx;
    margin-top: 80rpx;
    align-items: center;
}

.user-info .fui-icon__item:nth-child(n+2){
    flex: 1;
}

.user-info .fui-icon__item .fui-icon__name:first-child{
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10rpx;
}
.user-info .fui-icon__item .fui-icon__name:last-child{
    font-size: 28rpx;
    font-weight: 450;
    text-align: center;
    color: black;
}


::v-deep .user-head .fui-avatar__wrap {
    position: relative;
    display: inline-table;
    overflow: none !important;
    flex-shrink: 0;
    z-index: 3;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* border: white !important; */
    border: 2px solid #dbe4e6 !important; 
}
::v-deep .user-head .fui-avatar__size-large{
   
    width: 139rpx !important;
    height: 139rpx !important;
    /* border-radius: 100rpx; */
}

::v-deep .user-head .fui-avatar__size-large .fui-avatar__img{
    border: 3px solid white;
    width: 138rpx !important;
    height: 138rpx !important;
}

.user-name{
    height:20rpx;
    margin-top: 20rpx; 
}
.user-action{
  margin-top: 0rpx;
}
.user-action  .fui-icon__item{
    flex: 3;
    margin-right: 10rpx;
}
.user-action  .fui-icon__item:nth-child(3){
    flex: 1;
    margin-right: 0rpx;
}
.user-action  .fui-icon__item button{
     color: black;
}

.fui-list {
		display: flex;
		flex-direction: row;
		align-items: center;
}

.fui-list--item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin-right: 5rpx;
    width: 325rpx;
    padding-bottom: 20rpx;
    
	/* border-radius: 66rpx; */
}
.fui-section__title{
	margin-left: 32rpx;
}

.fui-list--item:first-child
{
	/* margin-left: 32rpx; */
    /* placeholder for future styles */
}
.fui-recommend{
    margin-top: 20rpx;
}
.fui-recommend .fui-list--item{
   border: 1rpx solid rgba(226, 225, 225, 0.3);
}
.recommed-close{
  width: 100%;
  text-align: right;
}

.follow-btn{
    line-height:70rpx;
    width: 80%;
    margin-top: 30rpx;
    background-color: #00a1ff;
    height: 70rpx;
    border-radius: 30rpx;
}

.tab-cursor {
    background: black;
    height: 2px;
    width: 33.33%;
    bottom: 0;
    left: 0;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
}

.tab-select{
    color: black;
    font-weight: 500;
}


/****aaaa */
.fui-section__title {
		margin-left: 32rpx;
}

.fui-grid__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
    font-size: 28rpx;
    font-weight: 400;
    height: 100%;
    width: 100%;
}

::v-deep .fui-grid__wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100px;
  background: white; 
  gap: 2px; 
}

::v-deep .fui-grid__item {
  padding: 0;
  text-align: center;
  background: white;
}


.fui-padding {
    padding: 0 0;
}

.fui-icon {
    width: 99.6%;
    height: 99.6%;
}

.fui-icon__2x {
    width: 64rpx;
    height: 64rpx;
    margin-bottom: 16rpx;
}

.fui-flex__column {
    flex: 1;
}


/***********吸顶 - 简洁版 ***************/
.tab-container-wrapper {
    background: white;
    border: 1px solid #f0f0f0;
    transition: all 0.2s ease;
    z-index: 998;
    position: relative;
    /* 强制显示，防止Tab消失 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.tab-container-wrapper.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 确保吸顶时也强制显示 */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav {
    background: white;
}

.tab-container {
    background: white;
    padding: 20rpx 0;
    border-bottom: 1px solid #f0f0f0;
    min-height: 60rpx; /* 确保Tab容器有最小高度 */
}

/* 内容区域最小高度，防止Tab切换时页面自动滑落，确保分页加载时有足够滚动空间 */
.fui-grid {
    min-height: 120vh; /* 确保内容区域足够高 */
    padding-bottom: 40rpx;
}

/* 空内容状态 */
.empty-content {
    min-height: 120vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.empty-text {
    color: #999;
    font-size: 32rpx;
    text-align: center;
}

/* 为每个grid item提供最小高度 */
.fui-grid-item {
    min-height: 200rpx;
}

.fui-footer {
    height: 60px;
    font-size: 24rpx;
    color: #B2B2B2;
    padding: 32rpx;
    box-sizing: border-box;
    text-align: center;
    background: #fafafa;
}
</style>
